<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link href="content/plugins/bootstrap/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="https://cdn.bootcss.com/hover.css/2.1.1/css/hover-min.css" rel="stylesheet">


    <style>
        /* 两列左侧自适应布局 */

        body {
            margin: 0 auto;
            height: 100%;
            min-height: 600px;
            min-width: 768px;
        }

        .destwrap {
            margin: 15px;
            background-color: #ccc;
        }

        .fix_right {
            position: relative;
            float: right;
            width: 230px;
            margin-left: -230px;
            background-color: white;
        }

        .auto_left {
            float: left;
            width: 100%;
            /*background-color: palevioletred;*/
        }

        .auto_left_inner {
            margin-right: 245px;
            /*background-color: blue;*/
        }

        .left_inner_each_wrap {
            width: 100%;
            background: white;
            height: auto;
            min-height: 100px;
            margin-bottom: 15px;
        }

        .loading-container {
            z-index: 2000;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #2dc3e8
        }

        .loading-container.loading-inactive {
            display: none
        }

        .loading-container.loading-inactive .loader {
            display: none
        }

        .loading-container .loader {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            -webkit-animation: typing 1s linear infinite alternate;
            -moz-animation: Typing 1s linear infinite alternate;
            animation: typing 1s linear infinite alternate;
            margin: 50vh auto;
            position: relative;
            left: -12px;
        }

        .one_02 {
            width: 90%;
            margin-left: 7vmin;
        }

        @media (max-width: 1200px) {
        }

        .one_02 > div {

            width: 14vmin;
            height: 14vmin;
            /*background: #ff0097;*/
            background-size: cover;

            /*width: 100px;*/
            /*height: 100px;*/
            /*background-color: palevioletred;*/
            margin: 2vmin 6vmin;

            text-align: center;
            cursor: pointer;

        }

        .one_02 .big_icon {
            min-width: 60px;
            min-height: 60px;
            width: 8vmin;
            height: 8vmin;
            background-color: #57b5e3;
            text-align: center;
            margin-top: 1vmin;
            margin-right: 3vmin;
            margin-left: 3vmin;
            margin-bottom: 1vmin;
            font-size: 1em;
            border-radius: 1em;
        }

        .big_icon .fa {
            font-size: 4em;
            color: white;
        }

        .clearfix {
            clear: both;
        }

        .my-fa-plus {
            font-size: 8vmin;
        }

        .my-fa-plus:before {
            content: "+";
        }

        *:before, *:after {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .one_02 .title {
            font-size: 1em;
            color: #555555;
            height: 4vmin;
            text-align: center;
        }

        @media screen and (max-width: 800px) {
            .big_icon .fa {
                font-size: 3em;
                color: white;
            }

            .one_02 .title {
                font-size: 0.9em;
                color: #555555;
                height: 4vmin;
                text-align: center;
            }
        }

    </style>

    <link rel="stylesheet" href="../Content/css/base/well.css">
    <link rel="stylesheet" href="../Content/css/border-color.css">


</head>

<body>

<!--<div class="loading-container">-->
<!--<div class="loader"></div>-->
<!--</div>-->

<div class="destwrap">
    <div class="auto_left">
        <div class="auto_left_inner">


            <div class="left_inner_each_wrap">

                <i class="fa my-fa-plus" aria-hidden="true"></i>

            </div>


            <div class="well with-header with-footer">
                <div class="header bordered-palegreen">Well With Header &amp; Footer</div>
                <div class="footer">I'm Footer</div>
            </div>

            <div class="well clearfix">
                <div class="one_02  clearfix">


                    <div class="hvr-bounce-in">
                        <!--<div class="fa fa-home"></div>-->
                        <div class="big_icon">
                            <div class="fa fa-home"></div>
                        </div>
                        <div class="title">模块一</div>
                    </div>


                    <div class="hvr-bounce-in">
                        <!--<div class="fa fa-home"></div>-->
                        <div class="big_icon">
                            <div class="fa fa-home"></div>
                        </div>
                        <div class="title">模块一</div>
                    </div>

                    <div class="hvr-bounce-in">
                        <!--<div class="fa fa-home"></div>-->
                        <div class="big_icon">
                            <div class="fa fa-home"></div>
                        </div>
                        <div class="title">模块一</div>
                    </div>

                    <div class="hvr-bounce-in">
                        <!--<div class="fa fa-home"></div>-->
                        <div class="big_icon">
                            <div class="fa fa-home"></div>
                        </div>
                        <div class="title">模块一</div>
                    </div>

                    <div class="hvr-bounce-in">
                        <!--<div class="fa fa-home"></div>-->
                        <div class="big_icon">
                            <div class="fa fa-home"></div>
                        </div>
                        <div class="title">模块一</div>
                    </div>
                    <div class="hvr-bounce-in">
                        <!--<div class="fa fa-home"></div>-->
                        <div class="big_icon">
                            <div class="fa fa-home"></div>
                        </div>
                        <div class="title">模块一</div>
                    </div>

                    <div class="hvr-bounce-in">
                        <!--<div class="fa fa-home"></div>-->
                        <div class="big_icon">
                            <div class="fa fa-home"></div>
                        </div>
                        <div class="title">模块一</div>
                    </div>

                    <div class="hvr-bounce-in">
                        <!--<div class="fa fa-home"></div>-->
                        <div class="big_icon">
                            <div class="fa fa-home"></div>
                        </div>
                        <div class="title">模块一</div>
                    </div>

                    <div class="hvr-bounce-in">
                        <!--<div class="fa fa-home"></div>-->
                        <div class="big_icon">
                            <div class="fa fa-home"></div>
                        </div>
                        <div class="title">模块一</div>
                    </div>


                </div>
            </div>


        </div>
    </div>
    <div class="fix_right">
        <p>消息中心</p>
    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function () {
        $(window).bind("load resize", function () {

            var outerWidth = $(window).width();
            var outerHeight = $(window).height();

            $(".fix_right").css({
                height: outerHeight - 30 + 'px'
            });


        });
    });
</script>

</body>

</html>